<template>
  <!-- 底部显示的标签 -->
  <view
    class="flex flex-between"
    :class="[props.direction == 'vertical' ? 'flex-col' : 'flex-row']"
    :style="[
      props.direction == 'horizontal'
        ? { width: width + 'rpx' }
        : { height: height + 'rpx' }
    ]"
  >
    <view
      v-if="props.direction == 'horizontal'"
      class="flex flex-row"
      style="width: 80rpx"
      :class="[
        index == 0 ? 'flex-row-top-start' : '',
        index == _stepArray.length - 1 ? 'flex-row-top-end' : '',
        index < _stepArray.length - 1 && index > 0 ? 'flex-row-top-center' : ''
      ]"
      v-for="(item, index) in _stepArray"
      :key="index"
    >
      <tmText :font-size="24" :label="item"></tmText>
    </view>
    <view
      v-if="props.direction != 'horizontal'"
      class="flex flex-row flex-row-center-start"
      style="width: 80rpx"
      v-for="(item, index) in _stepArray"
      :key="index"
    >
      <tmText :font-size="24" :label="item"></tmText>
    </view>
  </view>
</template>
<script lang="ts" setup>
import tmText from '../tm-text/tm-text.vue';
import { computed } from 'vue';
const props = defineProps({
  /**
   * 方向
   * horizontal:水平,
   * vertical:竖向。
   */
  direction: {
    type: String,
    default: 'horizontal'
  },
  width: {
    type: Number,
    default: 0
  },
  height: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  min: {
    type: Number,
    default: 0
  },
  step: {
    type: Number,
    default: 0
  },
  size: {
    type: Number,
    default: 32
  }
});

const _stepArray = computed(() => {
  let label = [];
  if (props.step == 0) return [];
  // if(props.step==1) return [props.min,props.max]
  let _step = props.max / props.step;
  for (let i = 1; i <= props.step; i++) {
    label.push(i * _step);
  }
  return [props.min, ...label];
});
</script>
